<template>
  <div class="hello">
    <header>
     <router-link to='pindao'>
         <span><img src="../assets/img/x.png"></span>
     </router-link>
      
      <span>活动.专题</span>
      <span><img src="../assets/img/gengduo.png"></span>
    </header>
    <main>
      <nav>
        <p>活动</p>
        <p></p>
        <p>更多</p>
      </nav>
      <div class="banner">
        <img src="../assets/img/hd-one.png">
        <!-- <p>进行中</p>
        <p>王牌活动</p> -->
        <h3>五天后结束</h3>
      </div>

      <div class="banner-one">
        <img src="../assets/img/hd-one.png">
        <!-- <p>进行中</p>
        <p>王牌活动</p> -->
        <h3>五天后结束</h3>
      </div>

      <div class="banner-two">
        <img src="../assets/img/hd-one.png">
        <!-- <p>进行中</p>
        <p>王牌活动</p> -->
        <h3>五天后结束</h3>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang = 'less'>
@import '.././assets/less/style.less';

header{
   .px2rem(height, 100);
   .webkit();
   align-items: center;
   justify-content: space-between;
   span:nth-child(1){
      .padding-left(20);
      img{
        .px2rem(height, 24);
        .px2rem(width, 25);
      }
   };
    span:nth-child(2){
      .padding-right(500);
      .font(30,#474747);
   };
    span:nth-child(3){
      .padding-right(20);
      img{
        .px2rem(height, 26);
        .px2rem(width, 6);
      }
   };
}
main{
  nav{
    .webkit();
    justify-content: space-between;
    .padding-top(50);
    p:nth-child(1){
      .padding-left(20);
    };
    p:nth-child(3){
      .padding-right(20);
    }
  }
  .banner,.banner-one,.banner-two{
    .px2rem(height, 335);
    width: 95%;
    margin: 20px auto;
    .border(1, solid, #ccc);
    img{
      .px2rem(height, 250);
      width: 100%;
    }
    h3{
      .font(22, #bfbfbf);
      .padding-top(28);
      .padding-left(10);
    }
  }
  .banner-one,.banner-two{
    .margin-top(80);
  }
}

</style>
